import { lazy, Suspense, useState } from 'react'
import { Navigate, Route, Routes } from 'react-router-dom'
import './App.scss'
import CustomRouter from './components/CustomRouter'
import { customHistory } from './utils/history'
import Home from '@/pages/Home'
const Login = lazy(() => import('@/pages/Login'))
const Layout = lazy(() => import('@/pages/Layout'))
const Profile = lazy(() => import('./pages/Profile'))
const Question = lazy(() => import('./pages/Question'))
const Video = lazy(() => import('./pages/Video'))
// const ProfileEdit = lazy(() => import('./pages/Profile/Edit'))
const AuthRoute = lazy(() => import('./components/AuthRoute'))
const Article = lazy(() => import('./pages/Article'))
const Search = lazy(() => import('./pages/Search'))
// const SearchResult = lazy(() => import('./pages/Search/Result'))
const Chat = lazy(() => import('./pages/Chat'))

function App() {
  return (
    <CustomRouter history={customHistory}>
      <Suspense fallback={<div className="loading">loading...</div>}>
        <div className="app">
          <Routes>
            <Route path='/' element={<Navigate to="/home" />} />
            <Route path="/login" element={<Login />} />
            <Route path="/home" element={<Layout />}>
              {/* 该路由的子节点，就是该路由的子路由 */}
              {/* index 路由，表示当前子路由的地址与父级路由的地址相同 */}
              <Route index element={<Home />} />
              {/* 
              子路由只需要写自己的路由地址即可，react 路由会自动与父级路由地址进行拼接
              比如， path="qs" 最终得到的路由地址为：/home/qs
            */}
              <Route path="qs" element={<Question />} />
              <Route path="video" element={<Video />} />
              <Route
                path="profile"
                element={
                  <AuthRoute>
                    <Profile />
                  </AuthRoute>
                }
              />
            </Route>
            {/* AuthRoute 组件的第二种使用方式： */}
            <Route element={<AuthRoute />}>
              {/* <Route path="/profile/edit" element={<ProfileEdit />} /> */}
              <Route path="/chat" element={<Chat />} />
              {/* :id 路由参数 */}
              <Route path="/articles/:id" element={<Article />} />
              {/* 搜索 */}
              <Route path="/search" element={<Search />} />
              {/* 搜索结果 */}
              {/* <Route path="/search/result" element={<SearchResult />} /> */}
            </Route>
          </Routes>
        </div>
      </Suspense>
    </CustomRouter>
  )
}

export default App
